<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./static/js/jquery.min.js"></script>
    <script src="./static/js/bootstrap.min.js"></script>
    <script src="./static/js/x6.js"></script>
    <script src="./static/js/x6-node.js"></script>
	
    <link href="./static/css/bootstrap.min.css" rel="stylesheet" />

    <style type="text/css">
        body {
            margin: 0px auto;
        }

        #container {
            margin-top: 16px;
            box-shadow: 0 0 10px 1px #e9e9e9;
            margin: 0px auto;
        }

        .dnd-rect {
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin: 16px;
            cursor: move;
            color: white;
            background-color: #1ABB9C;
        }

        #head div {
            display: inline-block;
        }

        #head {
            margin-top: 60px;
            margin-left: 150px;
        }

        .dnd-polygon {
            width: 100px;
            height: 100px;
            background: url(media/img/squareRectbg_green.png) no-repeat;
            background-size: 100% 100%;
            line-height: 100px;
            color: white;
            text-align: center;
        }

        .app-btns {
            margin-top: 60px;
            width: 1500px;
            height: 1500px;
            margin: 0px auto;
        }
    </style>
</head>
<body>
     <!-- HTML 部分 -->
     <div class="app-btns">
        <div>
            <div id="head">
                <div data-type="rect" class="dnd-rect" onm ousedown="drag(event)">
                </div>
                <div data-type="rect" class="dnd-polygon" onm ousedown="polygon(event)">
                </div>
                <div style="margin-left: 60px;">
                    <p class="walert" style="font-size: 18px">
                        提示:拖动图标到画布(双击图形或线可修改名称/导入为上一次导出的数据)！</p>
                </div>
                <div style="margin-left: 100px;">
                    <button type="button" class="btn btn-default" id="btnExportBoxOne" data-toggle="dropdown">
                        一键导出
                    </button>
                </div>
                <div style="margin-left: 10px;">
                    <button type="button" class="btn btn-default" id="btnImportBoxOne" data-toggle="dropdown">
                        一键导入
                    </button>
                </div>
            </div>
            <div id="container">
            </div>
        </div>
    </div>
    <!-- HTML 部分 -->


    <!--修改名称 模态框_开始-->
    <div class="modal fade in" tabindex="-1" role="dialog" id="TextModal">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" id="modal-title">编辑名称</h4>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid" style="padding-left: 0px">
                        <div class="row">
                            <div class="col-md-12 font20 pdtopbtm25">
                                <form class="form-horizontal form-top10">
                                    <div class="row">
                                        <div class="form-group">
                                            <label style="height: 34px;font-size: 16px;"
                                                class="col-sm-2 control-label required-after">名称</label></label>
                                            <div class="col-sm-10">
                                                <input class="form-control" name="name" type="text" data-tagname="名称"
                                                    required>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary Text_Okbtn">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!--修改名称 模态框_结束-->
    <script>
        
  // 定义节点
  X6.Graph.registerNode(
            'algo-node', {
            inherit: 'rect',
            width: 100,
            height: 50,
            ports: {
                groups: {
                    in: {
                        position: 'top',
                        attrs: {
                            circle: {
                                r: 4,
                                magnet: true,
                                stroke: '#31d0c6',
                                strokeWidth: 2,
                                fill: '#fff',
                            },
                        },
                    },
                    out: {
                        position: 'bottom',
                        attrs: {
                            circle: {
                                r: 4,
                                magnet: true,
                                stroke: '#31d0c6',
                                strokeWidth: 2,
                                fill: '#fff',
                            },
                        },
                    },
                    left: {
                        position: 'left',
                        attrs: {
                            circle: {
                                r: 4,
                                magnet: true,
                                stroke: '#31d0c6',
                                strokeWidth: 2,
                                fill: '#fff',
                            },
                        },
                    },
                    right: {
                        position: 'right',
                        attrs: {
                            circle: {
                                r: 4,
                                magnet: true,
                                stroke: '#31d0c6',
                                strokeWidth: 2,
                                fill: '#fff',
                            },
                        },
                    },
                },
            },
        },
            true,
        )

        // 定义节点
        X6.Graph.registerNode(
            'polygon', {
            inherit: 'polygon',
            ports: {
                groups: {
                    in: {
                        position: 'top',
                        attrs: {
                            circle: {
                                r: 4,
                                magnet: true,
                                stroke: '#31d0c6',
                                strokeWidth: 2,
                                fill: '#fff',
                            },
                        },
                    },
                    out: {
                        position: 'bottom',
                        attrs: {
                            circle: {
                                r: 4,
                                magnet: true,
                                stroke: '#31d0c6',
                                strokeWidth: 2,
                                fill: '#fff',
                            },
                        },
                    },
                    left: {
                        position: 'left',
                        attrs: {
                            circle: {
                                r: 4,
                                magnet: true,
                                stroke: '#31d0c6',
                                strokeWidth: 2,
                                fill: '#fff',
                            },
                        },
                    },
                    right: {
                        position: 'right',
                        attrs: {
                            circle: {
                                r: 4,
                                magnet: true,
                                stroke: '#31d0c6',
                                strokeWidth: 2,
                                fill: '#fff',
                            },
                        },
                    },
                },
            },
        },
            true,
        )

        // 初始化画布
        const graph = new X6.Graph({
            container: document.getElementById('container'),
            width: 1200,
            height: 1200,
            history: {
                enabled: true,
                beforeAddCommand(event, args) {
                    if (args.options) {
                        return args.options.ignore !== false
                    }
                },
            },
            selecting: true,    //点选/框选
            background: {
                color: '#fffbe6', // 设置画布背景颜色
            },
            grid: {
                type: 'mesh',  //网格类型
                size: 25, // 网格大小 10px
                visible: true, // 渲染网格背景
            },
            // panning: true,
            // mousewheel: true,
            // resizing: true, // 选中调整大小
            connecting: {
                snap: true,     //当 snap 设置为 true 时连线的过程中距离节点或者连接桩 50px 时会触发自动吸附
                allowBlank: false,      //是否允许连接到画布空白位置的点
                allowLoop: false,       //是否允许创建循环连线，即边的起始节点和终止节点为同一节点
                highlight: true,
                sourceAnchor: 'bottom',     //当连接到节点时，通过 sourceAnchor 来指定源节点的锚点。
                targetAnchor: 'center',     //当连接到节点时，通过 targetAnchor 来指定目标节点的锚点。
                connectionPoint: 'anchor',

                // 设置连接线的样式
                router: {
                    // 样式名
                    name: 'manhattan',
                    args: {
                        startDirections: ['top', 'right', 'bottom', 'left'],    //支持从哪些方向开始路由。
                        endDirections: ['top', 'right', 'bottom', 'left'],      //支持从哪些方向结束路由。
                    },
                },
                // 设置连接线的样式

                // 连接线
                createEdge() {
                    return graph.createEdge({

                        attrs: {
                            line: {
                                stroke: '#808080',
                                strokeWidth: 2,
                                targetMarker: {
                                    name: 'block',
                                    args: {
                                        size: '6',
                                    },
                                },
                            },
                        },
                    })
                },

                // 验证连接
                validateConnection({
                    sourceView,
                    targetView,
                    sourceMagnet,
                    targetMagnet
                }) {
                    // 只能从输出链接桩创建连接
                    if (!sourceMagnet) {
                        return false
                    }

                    // 只能连接到输入链接桩
                    if (!targetMagnet) {
                        return false
                    }

                    // 判断目标链接桩是否可连接
                    const portId = targetMagnet.getAttribute('port');
                    const node = targetView.cell

                    const port = node.getPort(portId)
                    if (port && port.connected) {
                        return false
                    }
                    return true
                }
            },
            // 禁止节点移动到画布外面
            translating: {
                restrict: true,
            },
        });

        // 拖拽时使用----新增节点
        const dnd = new X6.Addon.Dnd({
            target: graph,
            scaled: false,
            animation: true,
        })

        //节点双击事件
        graph.on('node:dblclick', ({ e, x, y, node, view, cell }) => {
            $('#TextModal').data({ row: cell, method: 'node' }).modal('show').find('#modal-title').html('编辑元素');
        })

        //边双击事件
        graph.on('edge:dblclick', ({ e, x, y, edge, view, cell }) => {
            $('#TextModal').data({ row: cell, method: 'edge' }).modal('show').find('#modal-title').html('编辑线');
        })

        // 保存按钮
        $('.Text_Okbtn').on('click', function () {
            var name = $('#TextModal').find('input').val();
            var method = $('#TextModal').data('method');
            var cell = $('#TextModal').data('row');

            if (method == 'node') {
                cell.attr('label', {
                    text: name,
                })
            } else {
                cell.setLabels([name])
            }

            $('#TextModal').modal('hide');
        })

        // 模态框
        $('#TextModal').on('hide.bs.modal', function () {
            $('#TextModal').find('input').val('');
        });




        // 拖入节点
        function drag(e) {
            var node = graph.createNode({
                shape: 'algo-node',
                x: 120,
                y: 50,
                label: 'Hello',
                attrs: {
                    label: {
                        text: '',
                        fill: '#6a6c8a',
                    },
                    body: {
                        fill: '#fff',
                        stroke: '#d9d9d9',
                    },
                },
                data: {
                    tag: "edit-node",
                },
                ports: [{
                    group: 'in',
                },
                {
                    group: 'right',
                },
                {
                    group: 'left',
                },
                {
                    group: 'out',
                    attrs: {
                        circle: {
                            magnet: true,
                            connectionCount: 1, // 自定义属性，控制连接桩可连接多少条边
                        }
                    }
                },
                ],
            })
            dnd.start(node, e)
        }
        // 拖入节点


        // 菱形拖入节点
        function polygon(e) {
            var node = graph.createNode({
                shape: 'polygon',
                x: 180,
                y: 40,
                width: 100,
                height: 100,
                attrs: {
                    label: {
                        text: '',
                        fill: '#6a6c8a',
                    },
                    body: {
                        fill: '#fff',
                        stroke: '#d9d9d9',
                        refPoints: '0,10 10,0 20,10 10,20'
                    },
                },
                data: {
                    tag: "edit-polygon",
                },
                ports: [{
                    group: 'in',
                },
                {
                    group: 'right',
                },
                {
                    group: 'left',
                },
                {
                    group: 'out',
                    attrs: {
                        circle: {
                            magnet: true,
                            connectionCount: 1, // 自定义属性，控制连接桩可连接多少条边
                        }
                    }
                },
                ],
            })
            dnd.start(node, e)
        }
        // 拖入节点


        // 移入显示连接桩
        const changePortsVisible = (visible) => {
            const ports = container.querySelectorAll(
                '.x6-port-body',
            )
            for (let i = 0, len = ports.length; i < len; i = i + 1) {
                ports[i].style.visibility = visible ? 'visible' : 'hidden'
            }
        }
        graph.on('node:mouseenter', () => {
            changePortsVisible(true)
        })
        graph.on('node:mouseleave', () => {
            changePortsVisible(false)
        })


        // 节点和边的移入删除按钮
        // 节点
        graph.on('node:mouseenter', ({
            node
        }) => {
            // node：该元素节点  node.data.tag：是该节点的名称
            if (node.data.tag === "edit-node") {
                node.addTools({
                    name: 'button-remove',
                    args: {
                        x: 0,
                        y: 0,
                        offset: {
                            x: 96,
                            y: 10
                        },
                    },
                })
            }
        })
        graph.on('node:mouseleave', ({
            node
        }) => {
            if (node.data.tag === "edit-node") {
                node.removeTools()
            }
        })


        graph.on('node:mouseenter', ({
            node
        }) => {
            // node：该元素节点  node.data.tag：是该节点的名称
            if (node.data.tag === "edit-polygon") {
                node.addTools({
                    name: 'button-remove',
                    args: {
                        x: 0,
                        y: 0,
                        offset: {
                            x: 70,
                            y: 22
                        },
                    },
                })
            }
        })
        graph.on('node:mouseleave', ({
            node
        }) => {
            if (node.data.tag === "edit-polygon") {
                node.removeTools()
            }
        })

        // 边线
        graph.on('edge:mouseenter', ({
            edge
        }) => {
            edge.addTools({
                name: 'button-remove',
                args: {
                    x: 0,
                    y: 0,
                    offset: {
                        x: 0,
                        y: 0
                    },
                },
            })
        })
        graph.on('edge:mouseleave', ({
            edge
        }) => {
            edge.removeTools()
        })
        // 节点和边的移入删除按钮


        graph.drawBackground({
            color: '#f5f5f5',
        })

        var a;

        // 导出
        $('#btnExportBoxOne').on('click', function () {
            a = graph.toJSON();
            // 清除画布
            
            graph.clearCells()
        })

        // 导入
        $('#btnImportBoxOne').on('click', function () {
            graph.fromJSON(a)
        })

      </script>
</body>
</html>